<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //这个函数方式可以在刷新页面的时候执行
        (function () {
            function Observer() {
                this.obj = {}
                //订阅消息
                this.on = function (type, handler) {
                    //有消息输出没有消息输出空数组
                    this.obj[type] = this.obj[type] || []
                    this.obj[type].push(handler)
                }
                //用emit来发送消息
                this.emit = function (type, msg) {
                    //这里的type是拿到所有订阅者的回调函数，调用函数会将消息传输给订阅者
                    //两种方法去判断下面是if语句
                    //  if(this.obj[type]){
                    //     this.obj[type].forEach((item) => {
                    //         item(msg)

                    //     });
                    //  }
                    //下面可以用&& 与表达式  与上面的if效果一样这种可以简化
                    this.obj[type] &&
                        this.obj[type].forEach((item) => {
                            item(msg)

                        });


                }
            }
            //把函数暴露在外，可以在外面调用这个函数
            window.Observer = Observer;
        })()
        //实例化对象
        var os = new Observer();

        //现在写订阅消息的代码
        //os为刚刚实例化的对象、on是接受订阅消息

        os.on('阿努比斯神殿', function (msg) {
            //在浏览器中输出一下
            console.log('莱因哈特 收到来自阿努比斯神殿的信息：' + msg);
        })
        os.on('阿努比斯神殿', function (msg) {
            //在浏览器中输出一下
            console.log('小美 收到来自阿努比斯神殿的信息：' + msg);
        })
        os.on('阿努比斯神殿', function (msg) {
            //在浏览器中输出一下
            console.log('天使 收到来自阿努比斯神殿的信息：' + msg);
        })
        os.on('阿努比斯神殿', function (msg) {
            //在浏览器中输出一下
            console.log('半藏 收到来自阿努比斯神殿的信息：' + msg);
        })
        //这里我们可以换一个发布者
        os.on('漓江塔', function (msg) {
            console.log('源氏 收到来之漓江塔的消息：' + msg);
        })
        os.on('漓江塔', function (msg) {
            console.log('76号 收到来之漓江塔的消息：' + msg);
        })
        os.on('漓江塔', function (msg) {
            console.log('锤妹 收到来之漓江塔的消息：' + msg);
        })


        console.log(os);
        console.log('下面是来自阿努比斯神殿发布的消息');
        //os.emit可以以发布者去发布信息前者为发布者，后者为发布的信息
        os.emit('阿努比斯神殿', '守望先锋集合')
        
        console.log('下面是来自漓江塔发布的消息');


        os.emit('漓江塔','我们拿下他')




    </script>
</body>

</html>